<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<ui:composition template="/templates/gerenciamento.xhtml">
	
	<ui:define name="js">
		<h:outputScript library="js" name="jquery.maskedinput-1.2.2.min.js" target="body" />
	</ui:define>
	
	<ui:define name="css">

		<link rel="stylesheet" type="text/css" href="style/folha_gerenciamento.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="style/logado.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="style/styles.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="style/styles2.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="style/perfil_cadastro.css" media="screen" />

		<style type="text/css">
			a:link {
				color: #000;
				text-decoration: none;
			}
			
			a:visited {
				text-decoration: none;
				color: #000;
			}
			
			a:hover {
				text-decoration: underline;
				color: #C60;
			}
			
			a:active {
				text-decoration: none;
				color: #C60;
			}
		</style>
	</ui:define>

	<ui:define name="mid">
		<h:form id="formCadastro">
			<div id='cssmenu'>
				<ul>
					<li><a4j:commandLink
							action="#{logadoBean.goGerenciamentoMeuUsaCardHistorico}">
							<span>HISTÓRICO</span>
						</a4j:commandLink></li>

					<li><a4j:commandLink
							action="#{logadoBean.goGerenciamentoMeuUsaCardRecarregueSeuCartao}">
							<span>RECARREGUE SEU CARTÃO</span>
						</a4j:commandLink></li>

					<li><a4j:commandLink
							action="#{logadoBean.goGerenciamentoMeuUsaCardGerencieSeuCartao}">
							<span>GERENCIE SEU CARTÃO</span>
						</a4j:commandLink></li>

					<li class='active'><a4j:commandLink>
							<span>PERFIL</span>
						</a4j:commandLink></li>
				</ul>
			</div>

			<div class="inside_extrato">
				<div class="top">
					<div class="top_inside1" align="center">
						<a4j:commandLink value="Alterar senha de acesso" action="#{perfilBean.abrirAlterarSenha}" />
					</div>
					
					<div class="top_inside2" align="center"></div>
					
					<div class="top_inside3" align="center">
						<a4j:commandLink value="Alterar dados pessoais" action="#{perfilBean.abrirAlterarCadastro}" />
					</div>
					
					<div class="top_inside2" align="center"></div>
					
					<div class="top_inside4" align="center">
						<a4j:commandLink value="Imagem" action="#{perfilBean.abrirAlterarFoto}" />
					</div>
				
				</div>
				
				<div class="b_table_1" align="center">ALTERAR DADOS PESSOAIS</div>
				
				<div class="b_table_2" align="center">NOME</div>
				
				<div class="b_table_3">
					<label for="textfield"></label> 
					<img src="images/10px.gif" width="10" height="10" /> 
					<img src="images/10px.gif" width="5" height="5" /> 
					<h:inputText value="#{perfilBean.usuario.nome}" style="width:350px"/>
				</div>
				
				<div class="b_table_2a" align="center">SEXO</div>
				
				<div class="b_table_3a" align="center">
					<label for="select"></label> 
					<h:selectOneMenu value="#{perfilBean.usuario.sexo}" style="width:130px"> 
						<f:selectItems value="#{perfilBean.listaSexo}" /> 
					</h:selectOneMenu> 
				</div>
				
				<div class="b_table_2b" align="left">
					<img src="images/10px.gif" width="10" height="10" />
					Data de nascimento
				</div>
				
				<div class="b_table_3a" align="center">
					<label for="textfield3"></label> 
					<rich:calendar value="#{perfilBean.usuario.dataNasc}" style="width:130px">
						<f:convertDateTime pattern="dd/MM/yyyy"/>
					</rich:calendar>
				</div>
				
				<div class="b_table_2" align="center">CELULAR</div>
				
				<div class="b_table_3b" align="center">
					<label for="textfield4"></label> 
					<h:inputText value="#{perfilBean.usuario.cel1}" style="width: 130px" />
				</div>
				
				<div class="b_table_3c" align="left">
					<img src="images/10px.gif" width="10" height="10" />
					Operadora
				</div>
				
				<div class="b_table_3b" align="center">
					<label for="select"></label> 
					<h:selectOneMenu value="#{perfilBean.usuario.opcel1}" style="width: 140px"> 
						<f:selectItems value="#{perfilBean.listaOperadora}" /> 
					</h:selectOneMenu> 
				</div>
				
				<div class="b_table_2a" align="center">CEP</div>
				
				<div class="b_table_3a" align="center">
					<h:inputText id="buscaCep" value="#{perfilBean.cepBusca}" maxlength="9" size="9" style="width:130px"/>
		  	    	<rich:jQuery selector="#formCadastro\:buscaCep" query="mask('99999-999')" timing="domready" />
				</div>
				
				<div class="b_table_2c" align="center">
					<div class="conteiner_mini2">
						<a4j:commandLink id="linkBuscaCep" action="#{perfilBean.buscarPorCep}" execute="buscaCep linkBuscaCep" render="selectUf selectCidade selectBairro selectLogradouro" >
			  	  			<img src="images/lupa.gif" width="22" height="22" />
			  	  		</a4j:commandLink>
					</div>
				</div>
				
				<div class="b_table_2" align="center">ESTADO</div>
				
				<div class="b_table_3b" align="left">
					<label for="textfield6"></label> 
					<img src="images/10px.gif" width="10" height="10" /> 
					<img src="images/10px.gif" width="5" height="5" /> 
					<h:selectOneMenu value="#{perfilBean.usuario.uf}" converter="ufConverter" style="width:90px;" id="selectUf">
	          			<f:selectItems value="#{perfilBean.listaUF}" var="uf" itemLabel="#{uf.sigla}" itemValue="#{uf}" />
	          			<f:ajax event="change" listener="#{perfilBean.atualizaCidade}" render="selectCidade"/>
	          		</h:selectOneMenu>
				</div>
				
				<div class="b_table_2d" align="center"></div>
				
				<div class="b_table_2a" align="center">CIDADE</div>
				
				<div class="b_table_3a" align="center">
					<label for="select"></label> 
					<h:selectOneMenu id="selectCidade" value="#{perfilBean.cidade}" converter="cidadeConverter" style="width:130px" >
	          			<f:selectItems value="#{perfilBean.listaCidade}" var="cidade" itemLabel="#{cidade.nome}" itemValue="#{cidade}" />
	          			<f:ajax event="change" listener="#{perfilBean.atualizaBairro}"  render="selectBairro"/>
	          		</h:selectOneMenu>
				</div>
				
				<div class="b_table_2c">
					<div class="conteiner_mini">
						<label for="textfield13"></label> 
						<h:inputText id="buscaCidade" value="#{perfilBean.cidadeBusca}" />
					</div>
					<div class="conteiner_mini2">
						<a4j:commandLink id="linkCidade" action="#{perfilBean.buscarPorCidade}" execute="buscaCidade linkCidade selectUf" render="selectCidade">
			  	  			<img src="images/lupa.gif" width="22" height="22" />
			  	  		</a4j:commandLink>
					</div>
				</div>
				
				<div class="b_table_2" align="center">BAIRRO</div>
				
				<div class="b_table_3b" align="center">
					<label for="textfield8"></label> 
					<label for="select2"></label> 
					<h:selectOneMenu id="selectBairro" value="#{perfilBean.bairro}" converter="bairroConverter" style="width:130px">
	          			<f:selectItems value="#{perfilBean.listaBairro}" var="bairro" itemLabel="#{bairro.nome}" itemValue="#{bairro}" />
	          		</h:selectOneMenu>
				</div>
				
				<div class="b_table_2d">
					<label for="textfield10"></label>
					<div class="conteiner_mini">
						<label for="textfield14"></label> 
						<h:inputText id="buscaBairro" value="#{perfilBean.bairroBusca}" />
					</div>
					<div class="conteiner_mini2">
						<a4j:commandLink id="linkBairro" action="#{perfilBean.buscarPorBairro}" execute="buscaBairro linkBairro selectCidade" render="selectBairro ">
			  	  			<img src="images/lupa.gif" width="22" height="22" />
			  	  		</a4j:commandLink>
					</div>
				</div>
				
				<div class="b_table_2a" align="center">LOGRADOURO</div>
				
				<div class="b_table_3a" align="center">
					<label for="select"></label> 
					<h:selectOneMenu id="selectLogradouro" converter="logradouroConverter" value="#{perfilBean.logradouro}" styleClass="cidade-style" style="width:130px" > 
						<f:selectItems value="#{perfilBean.listaLogradouro}" var="logradouro" itemLabel="#{logradouro.nome}" itemValue="#{logradouro}" /> 
					</h:selectOneMenu> 
				</div>
				
				<div class="b_table_2c">
					<label for="textfield9"></label>
					<div class="conteiner_mini">
						<label for="textfield15"></label> 
						<h:inputText id="buscaLogradouro" value="#{perfilBean.logradouroBusca}"/>
					</div>
					<div class="conteiner_mini2">
						<a4j:commandLink id="linkLogradouro" action="#{perfilBean.buscaPorLogradouro}" execute="buscaLogradouro linkLogradouro selectBairro" render="selectLogradouro " >
			  	  			<img src="images/lupa.gif" width="22" height="22" />
			  	  		</a4j:commandLink>
					</div>
				</div>
				
				<div class="b_table_2" align="center">N°</div>
				
				<div class="b_table_3b" align="center">
					<label for="textfield11"></label> 
					<h:inputText value="#{perfilBean.numero}" size="8" />
				</div>
				
				<div class="b_table_3c" align="center">Complemento</div>
				
				<div class="b_table_3b" align="center">
					<label for="textfield11"></label> 
					<h:inputText value="#{perfilBean.complemento}" size="20" />
				</div>
				
				<div class="b_table_4" align="right">
					<a4j:commandLink action="#{perfilBean.atualizarCadastroUsuario}" execute="@form" render="@all">
		          		<img src="images/botao_alterar.jpg" />
		          	</a4j:commandLink>	
				</div>
				
			</div>
		</h:form>
	</ui:define>
</ui:composition>

</html>